<template>
  <bindInfoCompontent>
    <bindInfoContentComponent slot="content" :data="data">
      <span class="tips haveData roleInfo roleTag" slot="infoContent">
        <span class="name" v-for="(item, index) in userInfo.authName" :key="index">{{item}}</span>
      </span>
      <button slot="button" @click="handelShowDialog">修改</button>
    </bindInfoContentComponent>
     <el-dialog
      custom-class="updateRole"
      :visible.sync="dialogVisible"
      ref="dialog"
      :close-on-click-modal="false"
      @close="changeClose"
      slot="dialog"
    >
      <template slot="title">
        <div class="headTitle">修改身份</div>
        <img
          :src="require('@/assets/images/delete.png')"
          @click="changeClose"
        />
      </template>
      <div class="roleList">
        <el-checkbox :label="key" name="roleFlag" v-for="(item,key) in roles" :key="key" v-model="roleFlag">{{item}}</el-checkbox>
        <div style="padding-top: 5px">注意：身份只单独勾选为“大学生”后，将无法重新修改角色身份</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handelSubmit" :disabled="!roleFlag.length">确 定</el-button>
      </span>
    </el-dialog>
  </bindInfoCompontent>
</template>

<script>
import { mapState } from 'vuex';
const bindInfoCompontent = () =>
  import("@/views/user/user/accountBindComponent/bindInfoCompontent");
const bindInfoContentComponent = () =>
  import("@/views/user/user/accountBindComponent/bindInfoContentComponent");
import { updateUserInfo } from "@/request/user";
export default {
  components: {
    bindInfoCompontent,
    bindInfoContentComponent
  },
  data() {
    return {
      data: {
        iconName: "el-icon-user-solid",
        title: "角色",
        tips: "修改账号角色身份"
      },
      dialogVisible: false,
      roles: {
        1: "大学生",
        4: "中小学生",
        8: "家长",
        16: "招聘企业",
        32: "导师",
        64: "课程设计师",
        2: "教师",
        128: "教务",
        256: "社会学员",
        512: "企业团购学员",
      },
      roleFlag: [], // 选择的身份
      isInit: true
    }
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo
    })
  },
  watch: {
    'userInfo'(n, o) {
      this.setRoleFlag()
    },
    roleFlag(n) {
      if (this.isInit) return this.isInit = false
      if (Number(n) == 1) {
        this.$antdMessage.warning({content: "身份只单独勾选为“大学生”后，将无法重新修改角色身份"})
      }
    }
  },
  methods: {
    // 打开弹出框
    handelShowDialog() {
      this.dialogVisible = true;
    },
    // dialog关闭弹窗回调
    changeClose() {
      this.dialogVisible = false;
    },
    // 设置roleFlag
    setRoleFlag() {
      if (this.userInfo.authNum.length) {
        this.roleFlag = this.userInfo.authNum.map(item => item+'')
      }
    },
    // 计算身份总数
    countRoleNum() {
      return this.roleFlag.reduce((acc, val) => Number(acc) + Number(val), 0);
    },
    // 提交数据
    handelSubmit() {
      let params = {
        user: {
          userID: this.userInfo.userID,
          roleFlag: this.countRoleNum()
        },
      };
      updateUserInfo(params).then((res) => {
        if (res.errno === 0) {
          this.$antdMessage.success({
            content: "修改成功!",
          });
          this.$store.commit('user/setUserinfolocaStorage', { key: this.$store.state.user.userInfoSessionName, val: Object.assign(this.userInfo, res.data), isRemember: true })
          this.$store.commit('user/useDeCodeSetUserInfo', res.data)
          // this.$store.dispatch('user/handleGenerateRoutes') // 更新权限路由
        } else {
          this.$antdMessage.error({
            content: res.message || "修改失败!",
          });
        }
      });
      this.dialogVisible = false
    },
  },
  mounted() {
    this.setRoleFlag()
  }
};
</script>

<style lang="stylus">
.roleTag {
    display: inline-block;
    max-width: 90%;
}

.updateRole {

  .el-dialog__header {
    padding: 24px 36px 0 27px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    img {
      cursor: pointer;
    }

    .headTitle {
      font-family: Segoe UI;
      font-size: 20px;
      color: #666666;
    }

    .el-dialog__headerbtn {
      right: 36px;
      height: 26px;

      .el-dialog__close {
        display: none;
      }
    }
  }
  .roleList {
    padding: 0 10px;
  }
}
</style>